<template>
  <div class="right-chart-1">
    <template v-if="tableConfig.data">
      <div class="left">
        <CustomChart class="lc2-chart" :option="option" />
      </div>
      <div class="right">
        <dv-scroll-board :config="tableConfig" class="lc1-chart" />
      </div>
    </template>
    <div v-else class="no-data">暂无数据</div>
  </div>
</template>

<script>
import CustomChart from "./CustomChart";
import { getTaskSummary } from "@/api/dashboard/blowIrriagtionSpinLine";
const lineLabelColor = "#ffffffeb";
const pieColor = {
  0: "#5470c6", //待执行
  1: "#9e56be", //待审核
  2: "#fac858", //已驳回
  3: "#ee6666", //已超时
  4: "#91cc75", //已完成
  5: "#5cc3eb", //执行中
  6: "#ab9578", //已关闭
};
export default {
  name: "LeftChart2",
  components: { CustomChart },
  props: {
    lineItem: {
      type: Object,
      default: null,
    },
    refreshKey: {
      type: Number,
      default: 0,
    },
  },
  data() {
    return {
      option: {
        tooltip: {
          trigger: "item",
        },
        legend: {
          show: false,
        },
        series: [
          {
            type: "pie",
            radius: "40%",
            // labelLine: {
            //   length: 10,
            //   length: 10,
            // },
            label: {
              formatter: "{b}{c}",
            },
            data: [],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)",
              },
            },
          },
        ],
      },
      tableConfig: {},
    };
  },
  created() {
    this.getSummary();
  },
  methods: {
    // 获取统计数据
    getSummary() {
      if (!this.lineItem) {
        return;
      }
      const { factoryDeptCode, workshopCode, lineCode } =
        this.lineItem.properties;
      const param = {
        ownedFactory: factoryDeptCode,
        ownedWorkshop: workshopCode,
        ownedProductionLine: lineCode,
        day: 1,
        queryQcTask: 1,
        statusList: ["2", "3"],
      };
      getTaskSummary(param).then((res) => {
        // 饼图
        if (res?.data?.taskSummaryList?.length) {
          this.option.series[0].data = res.data.taskSummaryList.map((ele) => ({
            value: ele.count,
            name: ele.statusName,
            itemStyle: {
              color: pieColor[ele.status],
            },
          }));
        }

        // 列表
        const taskList = res?.data?.taskList || [];
        const lists = taskList.map((ele) => [
          `<span class="text-wrap">${ele.taskName}</span>`,
          ele.statusName,
        ]);
        this.tableConfig = {
          headerBGC: "#050f67",
          header: ["任务 (已超时/已驳回)", "状态"],
          data: lists,
          index: true,
          rowNum: 5,
          indexHeader: "序号",
          columnWidth: [50, 190, 70],
          align: ["center", "center", "center"],
          oddRowBGC: "#053a6d",
          evenRowBGC: "#091c56",
        };
      });
    },
  },
  watch: {
    refreshKey: {
      handler() {
        this.getSummary();
      },
    },
  },
};
</script>

<style lang="less" scoped>
.right-chart-1 {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  .left,
  .right {
    height: 100%;
    padding-top: 50px;
  }
  .left {
    width: 44%;
  }
  .right {
    width: 56%;
  }
}
::v-deep {
  .text-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    line-height: 14px;
    white-space: wrap;
  }
}
.no-data {
  display: flex;
  flex: 1;
  justify-content: center;
  align-items: center;
  font-size: 14px;
  opacity: 0.6;
}
</style>
